<template>
	<div>
		<h3 class="aside-title">路由表</h3>
		<div v-highlight class="post-entry" style="margin-top: 10px;" v-html="makeHtml(content)"></div>
	</div>
</template>

<script>
	// 创建showdown实例（实现markdown转html）
	var converter = new showdown.Converter();

	function convertFileTree(fileTree) {
		return fileTree.filter(item => item.type === 'blob')
			.filter(item => item.path.startsWith('blog') && item.path !== 'blog/author.md' && item.path !== 'blog/author_concise.md')
			.map(item => ({
				name: item.path.split('/').pop(),
				path: item.path
			}))
			.sort((a, b) => a.path.localeCompare(b.path));
	}
	module.exports = {
		name: "tools",
		props: ['route'],
		data() {
			return {
				content: ''
			}
		}, //在这里调用ajax请求方法
		created() {
			this.loadBlog();
		},
		// 定义自定义指令 v-highlight 代码高亮
		directives: {
			highlight: {
				update(el) {
					let blocks = el.querySelectorAll("pre code");
					blocks.forEach((block) => {
						hljs.highlightBlock(block);
					});
				},
			},
		},
		methods: {
			loadBlog() {
				let this_ = this;
				let tree = localStorage.getItem('tree');
				if (null == tree) {
					axios.get('https://gitee.com/api/v5/repos/bok/bok/git/trees/master?recursive=1', {
						params: {}
					}).then(function(response) {
						if (response.status == 200) {
							this_.content = JSON.stringify(convertFileTree(response.data.tree));
							localStorage.setItem('tree', this_.content);
						} else {
							layer.msg("服务异常");
						}
					}).catch(function(error) {
						layer.msg("服务异常");
					});
				} else {
					this.content = tree;
				}
			},
			makeHtml(text) {
				return converter.makeHtml(text);
			},
		},
	}
</script>

<style scoped>
</style>
